
<template>
  <div class="admin-withdrow-main" v-loading="boo.loading">
    <div class="model-content">
      <div class="model-item money-item">
        <div class="model-label">提现信息</div>
        <div class="model-form withdrow-money">
          <div class="form-label">提现金额</div>
          <div class="money-content flex-normal">
            <span class="money-icon">￥</span>
            <div class="money-input">
              <el-input type="text" placeholder="请输入提现金额" v-model="params.money"></el-input>
            </div>
          </div>
          <div class="money-foot flex-normal">
            <span class="money-txt">可用余额：{{baseData['adminBalance'] || '0.00'}}</span>
            <span class="money-btn" @click="withdrowAll">全部提现</span>
          </div>
        </div>
      </div>
      <div class="model-item">
        <div class="model-label">账号信息</div>
        <div class="model-form flex-normal">
          <div class="form-label">账户名称</div>
          <div class="form-val flex-normal">
            <el-input v-model="params['name']" placeholder="请输入账户名称"></el-input>
          </div>
        </div>
        <div class="model-form flex-normal">
          <div class="form-label">提现账号</div>
          <div class="form-val flex-normal">
            <el-input v-model="params['bankCard']" placeholder="请输入提现账号"
            @blur="getBankInfo" @input="validateNum"></el-input>
          </div>
        </div>
        <div class="model-form flex-normal" v-if="params['bankName']">
          <div class="form-label">开户行</div>
          <div class="form-val flex-normal">
            <el-input v-model="params['bankName']" readonly></el-input>
          </div>
        </div>
        <div class="model-form flex-normal">
          <div class="form-label">提现密码</div>
          <div class="form-val flex-normal">
            <el-input v-model="params['password']" 
            placeholder="请输入提现密码" type="password"></el-input>
          </div>
        </div>
        <div class="model-form flex-normal">
          <div class="form-label">验证码</div>
          <div class="form-val flex-normal">
            <el-input v-model="params['code']" placeholder="请输入验证码"></el-input>
            <el-button type="text" class="code-btn-unit" @click="getSmsCode" :loading="timerObj.loading">
              <span class="btn-txt">{{timerObj.tips}}</span>
            </el-button>
          </div>
        </div>
      </div>
      <div class="btn-content">
        <el-button class="purshase-btn" type="primary" size="small" @click="showDialog('dialog-tx')" :loading="boo.isSubmit">立即提现</el-button>
      </div>
    </div>
    <div class="mark-content flex-column">
      <span class="mark-label">订购须知：</span>
      <span class="mark-row">1、如需充值，请使用手机银行或者网银，打款至存管账户</span>
      <span class="mark-row">2、存管账户转账仅限于工作日工作时间请安排好打款时间；</span>
      <span class="mark-row">3、转账充值操作必须使用与存管账户的同名账户，不支持非同名账户转账；</span>
      <span class="mark-row">4、服务过程中，如果有任何疑问，可致电客服：
          400-810-0049反馈</span>
    </div>
  </div>
</template>

<script>
import {isDecimal, trimAllStr} from '@/utils/tools.js'
import {
  getFinanceIndex
} from "@/api/financeManage/admin-finance.js";
import {
  withdrow, sendWithdrawSMS
} from "@/api/financeManage/admin-withdrow.js"
import {getBankNameByCode} from '@/api/common/index.js'

export default {
  components: {
    "dialog-normal": () => import("@/rhComponents/dialog/normal-dialog"),
  },
  data() {
    return {
      boo: {
        loading: false,
        isSubmit: false
      },
      baseData: {},
      params: {},
      timerObj: {
        timer: null,
        seconds: 60,
        loading: false,
        tips: '获取验证码'
      },
    };
  },
  async mounted(){
    let _self = this
    if(_self.timerObj.timer){
      clearInterval(_self.timerObj.timer)
      _self.timerObj.timer = null
    }
    _self.queryFinanceIndex()
  },
  methods: {   
    startTimer(){
      let _self = this
      _self.timerObj.timer = setInterval(() => {
        _self.timerObj.seconds--
        if(_self.timerObj.seconds === 0){
          _self.timerObj.seconds = 60
          _self.timerObj.loading = false
          _self.timerObj.tips = '重新获取验证码'
          clearInterval(_self.timerObj.timer)
        }else{
          _self.timerObj.tips = `${_self.timerObj.seconds}s 后重新获取`
        }
      }, 1000)
    },
    getSmsCode (){
      let _self = this
      _self.startTimer()
      _self.timerObj.loading = true
      _self.timerObj.seconds = 60
      return new Promise((resolve, reject) => {
        sendWithdrawSMS().then(res => {
          _self.$message.success('短信发送成功')
          resolve(true)
        }).catch((err) => {
          _self.timerObj.loading = false
          _self.timerObj.seconds = 60
          clearInterval(_self.timerObj.timer)
          reject(false)
        })
      })
    },
    validateNum(){
      let _self = this
      let num = _self.params.bankCard
      let str = num.replace(/\s/g, '').replace(/[^\d]/g, '').replace(/(\d{4})(?=\d)/g, '$1 ')
      _self.$set(_self.params, 'bankCard', str)
    },
    async getBankInfo(){
      let _self = this
      let code = _self.params['bankCard']
      if(!code) return
      await getBankNameByCode(trimAllStr(code)).then(res => {
        let {bankName, logo} = res.data
        _self.$set(_self.params, 'bankName', bankName)
      })
    },
    showDialog(ref){
      let _self = this
      let {money, name, bankCard, password, code} = _self.params
      if(!isDecimal(`${money}`)) return _self.$message.error('请输入正确格式的金额')
      if(!name) return _self.$message.error('账户名称不能为空')
      if(!bankCard) return _self.$message.error('提现账号不能为空')
      if(!password) return _self.$message.error('开户行不能为空')
      if(!code) return _self.$message.error('验证码不能为空')
      let queryParams = JSON.parse(JSON.stringify(_self.params))
      queryParams.bankCard = trimAllStr(queryParams.bankCard)
      _self.$nextTick(async () => {
        _self.boo.isSubmit = true
        withdrow(queryParams).then(res => {
          _self.$message.success(res.msg)
          _self.params['money'] = ''
          _self.queryFinanceIndex()
        }).finally(() => {
          _self.boo.isSubmit = false
        })
      })
    },
    queryFinanceIndex(){
      let _self = this
      _self.boo.loading = true
      getFinanceIndex().then(res => {
        _self.baseData = res.data
      }).finally(() => {
          _self.boo.loading = false
        })
    },
    withdrowAll(){
      this.$set(this.params, 'money', this.baseData['adminBalance'])
    }
  }
};
</script>
<style scoped lang="scss">
.admin-withdrow-main{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  .model-content{
    padding-right: 200px;
  }
  .code-btn-unit{
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    .btn-txt{
      font-size: 13px;
      color: #0003AA;
    }
  }
  .model-item ::v-deep{
    margin-bottom: 40px;
    .el-input__inner{
      border: none !important;
    }
    .model-label{
      color: #0003AA;
      font-size: 14px;
      padding-bottom: 25px;
    }
    .model-form{
      position: relative;
      margin-bottom: 20px;
      .form-label{
        font-size: 13px;
        color: #3D3D3D;
        width: 80px;
      }
      .form-val{
        flex: 1;
        border-bottom: 1px solid #D8D8D8;
      }
    }
    .money-content{
      border-bottom: 1px dotted #D8D8D8;
      padding-top: 15px;
      .money-icon{
        font-size: 12px;
        color: #3D3D3D;
      }
    }
    .money-foot{
      margin-top: 10px;
      justify-content: flex-end;
      .money-txt{
        font-size: 12px;
        color: #3D3D3D;
      }
      .money-btn{
        font-size: 12px;
        color: #0003AA;
        cursor: pointer;
        margin-left: 15px;
      }
    }
  }
}
.admin-withdrow-container{
  padding: 0 30px;
  
  .mark-content{
    padding-left: 80px;
    .mark-label{
      font-size: 14px;
      color: #333;
      margin-bottom: 10px;
    }
    .mark-label, .mark-row{
      color: #3D3D3D;
      font-size: 12px;
      line-height: 1.6;
      text-align: justify;
    }
  }
  
  .btn-content{
    margin-top: 30px;
    padding-bottom: 50px;
    .purshase-btn{
      width: 280px;
    }
  }
}
</style>